<template>
    <div class='bigbox'>
        <div class="outtouxiang">
            <div class="touxiang" ref="touxiang1">
                <input type="file" ref="filev" @change="changefile">
            </div>
        </div>

        <div class="inputbox">
            电话：<input type="text" v-model="tel" placeholder="请输入11位电话号码"><br />
            密码：<input type="password" v-model="mima" placeholder="密码由6-20位数字和字母组成"><br />
            邮箱：<input type="text" v-model="youxiang" placeholder="请输入邮箱"><br />
            <button class="zuce" @click="zhucebtn">注册</button>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                touxiang: "",
                imgsrc: "../img/head.webp",
                tel: "",
                mima: "",
                youxiang: ""
            }
        },
        methods: {
            changefile() {
                this.touxiang = this.$refs.filev.files[0],
                    this.$refs.touxiang1.style.backgroundImage = `url(${window.URL.createObjectURL(this.touxiang)})`;

            },
            async zhucebtn() {
                var reg = /^[1][3,4,5,7,8][0-9]{9}$/ //验证电话号码
                var reg1 = /^\w+@[a-zA-Z0-9]{2,10}(?:.[a-z]{2,4}){1,3}$/; //验证邮箱
                /* 判断密码   6到20位字符必须包含字母和数字 */
                var reg3 = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,20})$/
                if (reg.test(this.tel) == true && reg1.test(this.youxiang) == true) {
                    console.log("电话邮箱正确");
                    if (reg3.test(this.mima)) {
                        console.log("全部信息正确", 111111);
                        /* 发起网络请求加入数据库 */
                        var fordata = new FormData() 
                        fordata.append("tel", this.tel)
                        fordata.append("mima", this.mima)
                        fordata.append("youxiang", this.youxiang)
                        fordata.append("touxiang", this.touxiang)
                        var res = await this.$axios.post("/register", fordata)
                            /* console.log(res); res.data.retu.affectedRows == 1*/
                        if (res.data.code ==2002) {
                            alert("注册成功,可以登录咯");
                        }else if(res.data.code ==4003){
                            alert("电话或邮箱已被注册");
                        }
                    }
                }
            }

        },
        mounted() {

        },
    }
</script>
<style scoped>
    .outtouxiang {
        position: relative;
        margin: 0 auto;
        width: 160px;
        height: 160px;
        background-image: url("../img/head2.png");
        background-size: 150px 150px;
        background-repeat: no-repeat;
        background-position: center center;
    }
    /* 头像 */
    
    .touxiang {
        position: absolute;
        left: 24px;
        top: 42px;
        margin: 0 auto;
        width: 112px;
        height: 87px;
        border-radius: 30px;
        background-image: url("../img/head.webp");
        background-size: 120px 110px;
        background-position: center center;
    }
    
    .touxiang input {
        width: 100px;
        height: 100px;
        opacity: 0;
    }
    /* 所有input 标签样式 */
    
    .inputbox input {
        width: 400px;
        height: 40px;
        margin-top: 30px;
        outline: none;
        border: 1px solid gray;
        border-top: 0;
        border-left: 0;
        border-right: 0;
    }
    /* 注册按钮 */
    
    .inputbox .zuce {
        width: 300px;
        height: 37px;
        background-image: url('../img/login-btn.png');
        background-size: contain;
        margin-top: 34px;
        margin-left: 15px;
        border-radius: 20px;
        border: 0;
        color: white;
        font-size: 18px;
    }
</style>